<template>
	<view class="">
		<u-sticky customNavHeight="44" >
			<view class="flex-box nav-title">
				<image src="@/static/img/store.png" class="icon-nav"></image>
				<view class="box-1">
					{{info.title || ''}}
				</view>
				<u--input class="input-bg" shape="circle" placeholder="搜索核销记录" prefixIcon="search"
					prefixIconStyle="font-size: 22px;color: #909399" v-model="search" confirm-type="search"
					@confirm="downCallback"></u--input>
			</view>
		</u-sticky>
		<view class="content">
			<view class="content-title">
				已核销券<text class="title-num">{{info.num || 0}}</text>张
			</view>
			<mescroll-body ref="mescrollRef" height="70%" @init="mescrollInit" @down="downCallback" @up="upCallback">
					<view class="list-item" v-for="(item,index) in dataList" :key="index">
						<view class="flex-box item-title">
							<image v-if="item.headimg" :src="item.headimg" class="icon-head"></image>
							<image v-else="item.headimg" src="@/static/img/head.png" class="icon-head"></image>
							<view class="box-1">
								<view class="nickname">
									{{item.nickname}}
								</view>
								<view class="tel">
									tel:{{item.tel}}
								</view>
							</view>
						</view>
						<view class="flex-box item-msg">
							<text  class="msg-text">服务内容</text>：
							<view class="box-1 text-right">
								{{item.title}}
							</view>
						</view>
						<view class="flex-box item-msg">
							<text class="msg-text">核销时间</text>：
							<view class="box-1 text-right">
								{{item.update_time}}
							</view>
						</view>
						<view class="flex-box item-msg">
							<text class="msg-text">核销门店</text>：
							<view class="box-1 text-right">
								{{item.store_name}}
							</view>
						</view>
						<view class="flex-box item-msg">
							<text class="msg-text">券码</text>：
							<view class="box-1 text-right">
								{{item.code}}
							</view>
						</view>
					</view>
			</mescroll-body>
		</view>
			<view class="fixed-box">
				<view class="san-btn" @click="scanFun">
					扫码验券
				</view>
			</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { wxconfig } from "@/utils/mixin-wxconfig.js";
	export default{
		mixins:[wxconfig,MescrollMixin],
		data(){
			return {
				search:'',
				dataList:[],
				pageSize:20,
				info:{
					title:'',
					num:0,
				}
			}
		},
		onLoad(){
			this.initData()
		},
		methods:{
			upCallback(page){
				this.$u.api.storeCouponList({
					page:page.num,
					so:this.search??'',
					}).then(res=>{
				  this.mescroll.endBySize(this.pageSize, res.msg.totalPage);
				  if(page.num == 1){this.dataList = [];} //如果是第一页需手动制空列表
				  this.dataList =  this.dataList.concat(res.msg.list); //如果是第一页需手动制空列表
				}).catch(()=>{
			  	//联网失败, 结束加载
			  	this.mescroll.endErr();
			  })
			},
			downCallback(){
			  this.mescroll.resetUpScroll();
			},
			initData(){
				this.$u.api.storeIndex().then(res=>{
					if(res.code==200){
						this.info = res.msg
					}
				})
			},
			scanFun(){
        wx.ready( () =>{
          wx.scanQRCode({
            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
            success:  (res)=>{
              var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
              this.couponOff(result)
            }
          });
        })

			},
			//扫码核销
			couponOff(code)
			{
				uni.showModal({
					title:"温馨提示",
					content:`您确定要核销券码为${code}的券吗？`,
					confirmText:"确认核销",
					success:res=>{
						if(res.confirm){
							uni.showLoading()
							this.$u.api.storeCouponOff({code:code}).then(content=>{
								uni.hideLoading()
								this.$u.toast(content.msg)
								if(content.status==200)
								{
									setTimeout(()=>{
										this.downCallback()
									},1500)
									return
								}
							})
							.catch(err=>{
								uni.hideLoading()
							})
						}
					}
				})
				
			}
		}
	}
</script>

<style lang="scss">
	page{
		background:#F6F7FB;
	}
	.nav-title{
		padding:20rpx;
		background:#fff;
		font-size:30rpx;
		font-weight: bolder;
		.icon-nav{
			width: 33rpx;
			height: 31rpx;
			display: block;
			margin-right:10rpx;
		}
		.input-bg{
			background: #F6F7FB;
		}
	}
	.content{
		padding:30rpx;
		font-size:28rpx;
		padding-bottom:140rpx;
		.content-title{
			padding-bottom:30rpx;
			.title-num{
				color:$base;
			}
		}
		.item-title{
			padding:16rpx 20rpx;
			background:linear-gradient(270deg, rgba(199,199,199,0.5) 0%, rgba(255,255,255,0) 100%);
			border-radius: 10rpx;
			.icon-head{
				width: 110rpx;
				height: 110rpx;
				margin-right:30rpx;
				border-radius: 50%;
			}
			.nickname{
				font-weight: bolder;
				font-size:30rpx;
				padding-bottom:20rpx;
			}
		}
		.list-item{
			border-radius: 10rpx;
			background: #fff;
			margin-bottom:20rpx;
		}
		.item-msg{
			padding:20rpx;
			font-size:30rpx;
			font-weight:bolder;
			color:#353535;
			.msg-text{
				text-align-last: justify;
				width: 130rpx;
				font-size:28rpx;
			}
		}
	}
	.text-right{
		text-align: right;
	}
	.fixed-box{
		left:0;
		position: fixed;
		bottom:0;
		z-index:10;
		right:0;
		background: #F6F7FB;
		padding:30rpx;
	}
	.san-btn{
		background: $base;
		color:#fff;
		border-radius: 80rpx;
		text-align: center;
		font-weight: bolder;
		font-size:36rpx;
		line-height: 80rpx;
		width: 100%;
	}
</style>